<template>
    <el-row >
        <div class="block">
            <el-checkbox v-model="selected" class="mr-2"></el-checkbox>
            <label class="col-form-label mr-1" >{{'项目:'}}</label>
            <el-select
                v-model="filters.project"
                @change="projectChanged"
                style="width: 200px;"
                size="mini"
                class="mr-4">
                <el-option label="所有" value="all"></el-option>
                <el-option
                    v-for="item in projectList"
                    :key="item.project"
                    :label="item.project"
                    :value="item.project">
                </el-option>
            </el-select>
            <label class="col-form-label mr-1">{{'分支:'}}</label>
            <el-select
                v-model="filters.branch"
                style="width: 200px;"
                @change="branchChanged"
                size="mini"
                class="mr-4">
                <el-option
                    v-for="item in branchList"
                    :key="item.branch"
                    :label="item.branch"
                    :value="item.branch">
                </el-option>
            </el-select>
            <label class="col-form-label mr-1">{{'Manifest:'}}</label>
            <el-select
                v-model="filters.xml"
                style="width: 200px;"
                size="mini"
                class="mr-3">
                <el-option
                    v-for="item in xmlListComputed"
                    :key="item"
                    :label="item"
                    :value="item">
                </el-option>
            </el-select>
            <!-- <el-checkbox v-model="checked" class="">显示子目录</el-checkbox> -->
        </div>
    </el-row>
    
</template>
<script>
import { getHeader } from '@/app.config'

export default {
    data() {
        return {
            selected: false,
            filters: {
                project: 'all',
                branch: '',
                xml: '',
            },
            checked: false,
            projectList: [],
            branchList: [],
            xmlList: [],
            searching: false,
        }
    },
    methods: {
        projectChanged: function() {
            this.filters.branch = '';
            this.filters.xml = '';
            this.getBranch(this.filters.project);
        },
        branchChanged: function() {
            this.filters.xml = '';
            this.getXML(this.filters.project, this.filters.branch);
        },
        getProject: function() {
            var source = process.env.VUE_APP_KANBAN_HOST+'/api/manifest/project'
            this.$axios.get(source, {headers: getHeader()})
                .then((response) => {
                    if (response.status == 200) {
                        if (response.data.code == 200) {
                            this.projectList = response.data.project_name;
                        }
                    }
                })
                .catch((err) => {
                    // eslint-disable-next-line
                    console.log(err);
                });
        },
        getBranch: function(project) {
            this.$axios.get('/api/manifest/branch?project='+project, {headers: getHeader()})
                .then((response) => {
                    if (response.status == 200) {
                        if (response.data.code == 200) {
                            this.branchList = response.data.branch_info;
                        }
                    }
                })
                .catch((err) => {
                    // eslint-disable-next-line
                    console.log(err);
                });
        },
        getXML: function(project, branch) {
            this.$axios.get('/api/manifest/xml?project='+project+'&branch='+branch, {headers: getHeader()})
                .then((response) => {
                    if (response.status == 200) {
                        if (response.data.code == 200) {
                            this.xmlList = response.data.xml_info;
                        }
                    }
                })
                .catch((err) => {
                    // eslint-disable-next-line
                    console.log(err);
                });
        },
        fileBubble: function() {
            if (this.selected) {
                if (this.filters.xml) {
                    var file = 'project:'+this.filters.project+'+branch:'+this.filters.branch+'+xml:'+this.filters.xml;
                    this.$emit('file', {'file': file, 'project': this.filters.project});
                }
            }  else {
                this.$emit('file', {'file': ''});
            }
        }
    },
    watch: {
        selected() {
            this.fileBubble();
        },
        'filters': {
            handler: function() {
                this.fileBubble();
            },
            deep: true,
        }
    },
    computed: {
        xmlListComputed: function() {
            if (this.checked) {
                return this.xmlList;
            } else {
                return this.xmlList.filter(function(value) {
                    if (value.indexOf('/') === -1) {
                        return value;
                    }
                })
            }
        }
    },
    mounted: function() {
        this.getProject();
        this.getBranch('all');
    }
}
</script>
